<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>合同详情页</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--&lt;!&ndash; Font Awesome &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--&lt;!&ndash; Ionicons &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <style>
        .bigTitle {
            height: 30px;
            line-height: 30px;
            border-bottom: 2px solid #4796e5;
            font-size: 16px;
            font-weight: bold;
        }

        .smallTitle {
            height: 20px;
            line-height: 20px;

            font-weight: bold;
            font-size: 14px;
        }

        .addPz {
            float: right;
            font-weight: normal;
            color: #4796e5;
            cursor: pointer;
        }

        .selectBox .item {
            overflow: hidden;
            font-size: 12px;
            margin: 15px 0;
        }

        .selectBox .item .title {
            font-weight: bold;
            width: 105px;
            text-align: left;
            float: left;
        }

        .selectBox .item .boxCenter {
            float: left;
            margin-left: 50px;
        }

        .selectBox .item .boxCenter a {
            margin-right: 20px;
        }

        label {
            margin: 0;
            margin-right: 10px;
            font-weight: normal;
        }

        input[type=checkbox], input[type=radio] {
            margin: 0;
            margin-top: 1px \9;
            float: left;
            line-height: normal;
            margin-top: 2px !important;
            margin-right: 2px !important;
        }

        .contractDetail {
            font-size: 14px;
            line-height: 28px;
            font-family: 宋体;
        }

        /*合同样式*/
        .conTitle {
            font-family: 宋体;
            font-size: 20px;
            font-weight: bold;
            line-height: 2;
            margin: 0pt;
            orphans: 0;
            text-align: center;
            border-top: 1px solid #333;
            widows: 0;
        }

        .conTwoTitle {
            font-family: 宋体;
            font-size: 14px;
            font-weight: bold;
            font-size: 11pt;
            line-height: 150%;
            margin: 0pt;
            orphans: 0;
            text-align: right;
            overflow: hidden;

        }

        .conTwoTitleBox {
            float: right;
            width: 152px;
            text-align: left;
        }

        .conTable {
            border-collapse: collapse;
            margin: 0 0 0 auto;
            width: 98.84%;
            border-left: 1px solid #000000;
            border-top: 1px solid #000000;
            font-size: 14px;
            font-family: 宋体;
        }

        .conTable td {
            border-right: 1px solid #000000;
            border-bottom: 1px solid #000000;
        }

        .conTable .td-title {
            background-color: #bfbfbf;
            font-family: 宋体;
            font-size: 14px;
            font-weight: bold;
            height: 40px;
            vertical-align: middle;
            text-align: center;
        }

        .conTable .td-value {
            font-family: 宋体;
            font-size: 14px;
            line-height: 1.4;
            font-weight: bold;
            height: 40px;
            vertical-align: middle;
            text-align: center !important;
            color: red !important;
            padding: 0 6px !important;
        }

        .conIndent {
            text-indent: 35px;
        }

        .sign {
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .sign .item {
            height: 40px;
            line-height: 40px;
        }

        .sign .title {
            text-align: right;
        }

        .sign .left {
            float: left;
            margin-left: 35px;
        }

        .sign .right {
            float: right;
            margin-right: 200px;
        }

        .confidentiality {
            font-weight: bold;
        }

        .confidentiality .right {
            margin-right: 200px;
            width: 300px;
            text-align: center;
            float: right;
        }

        .confidentiality .line {
            border: 2px dashed #333;
        }

        .sign .title {
            width: 70px;
            float: left;
        }

        .sign .value {
            float: left;
        }

        .table-detail input[type=text] {
            padding: 0 !important;
        }

        .vEdit[contenteditable=true] {
            user-modify: read-write-plaintext-only;
        }

        .vEdit:empty:before {
            content: attr(placeholder);
            display: block;
            color: #ccc;
        }

        .vEdit {
            height: 100%;
            min-width: 20px;
            line-height: 28px;
            min-height: 18px;
            display: inline-block;
            text-indent: 0px;
            word-break: break-all;
            outline: none;
            user-select: text;
            white-space: pre-wrap;
            text-align: left;

            vertical-align: middle;
        }

        .smallEdit {
            line-height: 1;
            border-bottom: 1px solid red;
            color: red;
        }

    </style>
</head>
<body>
<!-- Content Header (Page header) -->
<section class="content" id="app">
    <div class="model-picker-dropdown">
        <div class="model-select-wrap">
            <div class="model-select-tab">
                <a class="active" data-count="type">省</a><a class="" data-count="brand">市</a>
            </div>
            <div class="model-select-content">
                <div class="model-select type" data-count="type" style="display: block;">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="item in provinceList">{{item.name}}</a>
                    </dl>
                </div>
                <div class="model-select brand" data-count="province">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="(item,i) in cityList">{{item.name}}</a>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <div class="selectBox">
        <div class="item">
            <div class="title">|&nbsp;关联商务预申请</div>
            <div class="boxCenter"><a href="">李华</a><a href="">CX20</a><a href="">20万元</a></div>
        </div>
        <!--<div class="item">-->
        <!--<div class="title">|&nbsp;选择生产商</div>-->
        <!--<div class="boxCenter">-->
        <!--<label>约翰迪尔<input type="radio"  value="约翰迪尔"/></label>-->
        <!--<label>凯斯<input type="radio"  value="凯斯"/></label>-->
        <!--<label>利勃海尔<input type="radio"  value="利勃海尔"/></label>-->
        <!--</div>-->
        <!--</div>-->
        <div class="item">
            <div class="title">|&nbsp;选择合同类别</div>
            <div class="boxCenter">
                <label>销售合同<input type="checkbox" disabled="disabled" value="销售合同"
                                  :checked="contractTypeList.indexOf('sales')>=0"/></label>
                <label>补充协议<input type="checkbox" value="补充协议" :checked="contractTypeList.indexOf('supplementary')>=0"
                                  @click="checkedOne('supplementary')"/></label>
                <label>担保协议<input type="checkbox" value="担保协议" :checked="contractTypeList.indexOf('guarantee')>=0"
                                  @click="checkedOne('guarantee')"/></label>
                <label>旧机置换合同<input type="checkbox" value="旧机置换合同" :checked="contractTypeList.indexOf('replacement')>=0"
                                    @click="checkedOne('replacement')"/></label>
                <label>货物交接单<input type="checkbox" value="货物交接单" :checked="contractTypeList.indexOf('acceptance')>=0"
                                   @click="checkedOne('acceptance')"/></label>
                <label>保密协议<input type="checkbox" value="保密协议" :checked="contractTypeList.indexOf('confidentiality')>=0"
                                  @click="checkedOne('confidentiality')"/></label>
                <label>承诺书<input type="checkbox" value="承诺书" :checked="contractTypeList.indexOf('commitment')>=0"
                                 @click="checkedOne('commitment')"/></label>
                <label>其他<input type="checkbox" value="其他" :checked="contractTypeList.indexOf('other')>=0"
                                @click="checkedOne('other')"/></label>
            </div>
        </div>
    </div>
    <div class="contract">
        <div class="smallTitle">合同 <span class="addPz">新建批注</span></div>

        <!--内容-->
        <div class="contractDetail" style="width: 80%;float:left;">
            <!--承诺书-融资、分期-->
            <template v-if="showModule('融资租赁,内部分期,全款','commitment')">
                <div class="conTitle">承 诺 书</div>
                <div class="conIndent">
                    本人周保（身份证号：<span style="color:red;">{{contract.commitment.buyerTaxNo}}</span>）于 <span
                        style="color:red;">{{today}}</span>与<span
                        style="color:red;">{{contract.main.seller}}</span>签订<span style="color:red;">{{contract.sales.contractNo?contract.sales.contractNo:"审核通过，系统自动生成"}}</span>号销售合同，从<span
                        style="color:red;">{{contract.main.seller}}</span>购买<span style="color:red;">{{contract.main.brandName}}{{contract.main.modelName}}</span>挖掘机<v-edit-div v-model='contract.commitment.deviceNumber' v-if="pageType!='look'"
                                                          class="smallEdit"></v-edit-div>
                    <span style="color: red" v-else>{{number2chinese(contract.commitment.deviceNumber)}}</span>
                    台（序列号  <span style="color: red">{{contract.main.serialNo}}</span>），由于本人无法支付约定款项，故用壹台旧<span
                        style="color:red;">{{contract.replacement.brand}}{{contract.replacement.model}}（序列号{{contract.replacement.serialNumber}}）{{contract.replacement.deviceType}}</span>折价
                    <v-edit-div v-model='contract.commitment.replacementPrice' v-if="pageType!='look'"
                                class="smallEdit"></v-edit-div>
                    <span style="color: red" v-else>{{contract.commitment.replacementPrice}}</span>
                    <span style="color: red"> 元( {{number2chinese(contract.commitment.replacementPrice)}} )</span>抵付给<span
                        style="color:red;">{{contract.main.seller}}</span>并签订旧机置换合同（合同编号：<span style="color:red;">{{contract.replacement.contractNo}}</span>）。
                </div>
                <div class="conIndent">
                    本人承诺对该设备享有合法的全部产权且设备并未设立任何的抵押、质押或其它担保，如有隐瞒欺诈行为造成的产权纠纷将由本人承担全部的法律及赔偿责任，且<span style="color:red;">{{contract.main.seller}}</span>可随时通过GPS将设备（<span
                        style="color:red;">{{contract.main.brandName}}{{contract.main.modelName}}{{contract.main.deviceType}}，序列号{{contract.main.serialNo}}</span>
                    ）停机并收回该设备。
                </div>
                <div class="sign">
                    <div class="right">
                        <div class="item">
                            <div class="title">承<span style="margin: 0 7px;">诺</span>人：</div>
                            <span style="color:red">{{contract.main.buyer}}</span>
                        </div>
                        <div class="item">
                            <div class="title">日&nbsp;&nbsp;期：</div>
                            <div class="value"><span style="color: red">{{today}}</span></div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </template>
            <!--补充协议--融资-->
            <template v-if="showModule('融资租赁','supplementary')">
                <div class="conTitle">补 充 协 议</div>
                <div class="conTwoTitle">签约时间：<span style="color:red">{{today}}</span></div>
                <table class="conTable table-detail" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="td-title" style="width: 25%;">合同号</td>
                        <td class="td-value" style="width: 25%;">{{contract.supplementary.contractNo?contract.supplementary.contractNo:"审核通过，系统自动生成"}}</td>
                        <td class="td-title" style="width: 25%;">签署地点</td>
                        <td class="td-value" style="width: 25%;">
                            <input type="text" v-if="pageType!='look'" v-model="contract.main.city"
                                   style="text-align: center"/>
                            <span v-else>{{contract.main.city}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">卖方</td>
                        <td class="td-value" style="width: 25%;">{{contract.main.seller}}</td>
                        <td class="td-title" style="width: 25%;">买方（公司）</td>
                        <td class="td-value" style="width: 25%;">
                            <input type="text" v-if="pageType!='look'" v-model="contract.main.buyer"
                                   style="text-align: center"/>
                            <span v-else>{{contract.main.buyer}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">税号</td>
                        <td class="td-value" style="width: 25%;">{{contract.main.sellerTaxNo}}</td>
                        <td class="td-title" style="width: 25%;">身份证号（税号）</td>
                        <td class="td-value" style="width: 25%;">
                            <input type="text" v-if="pageType!='look'" v-model="contract.main.buyerTaxNo"
                                   style="text-align: center"/>
                            <span v-else>{{contract.main.buyerTaxNo}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">地址</td>
                        <td class="td-value" style="width: 25%;">{{contract.main.sellerAddress}}</td>
                        <td class="td-title" style="width: 25%;">地址</td>
                        <td class="td-value" style="width: 25%;">
                            <input type="text" v-if="pageType!='look'" v-model="contract.main.buyerAddress"
                                   style="text-align: center"/>
                            <span v-else>{{contract.main.buyerAddress}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">联系电话</td>
                        <td class="td-value" style="width: 25%;">{{contract.main.sellerTel}}</td>
                        <td class="td-title" style="width: 25%;">联系电话</td>
                        <td class="td-value" style="width: 25%;">
                            <input type="text" v-if="pageType!='look'" v-model="contract.main.buyerTel"
                                   style="text-align: center"/>
                            <span v-else>{{contract.main.buyerTel}}</span>
                        </td>
                    </tr>

                </table>
                <div class="conIndent">一、根据(<span style="color: red">{{contract.supplementary.contractNo}}</span>)号销售合同,
                    卖方为买方代为办理银行融资租赁款，买方在设备到达指定地点前支付卖方的应付首付款金额为
                    <v-edit-div v-model='contract.supplementary.firstPayMent' v-if="pageType!='look'"
                                class="smallEdit"></v-edit-div>
                    <span style="color: red" v-else>{{contract.supplementary.firstPayMent}}</span>
                    <span style="color: red"> 元( {{number2chinese(contract.supplementary.firstPayMent)}} )</span>。
                </div>
                <div class="conIndent">二、由于买方资金不足不能一次支付设备总金额，所以卖方允许买方将壹台旧 <span style="color: red">{{contract.main.brandName}}{{contract.main.modelName}} </span>
                    (序列号：<span style="color: red"> {{contract.main.serialNo}}</span> )折价
                    <v-edit-div v-model='contract.supplementary.discountPrice' v-if="pageType!='look'"
                                class="smallEdit"></v-edit-div>
                    <span style="color: red" v-else>{{contract.supplementary.discountPrice}}</span>
                    <span style="color: red"> 元( {{number2chinese(contract.supplementary.discountPrice)}} )</span>抵付给卖方用于支付本台设备部分款项，并在交车前一次性支付卖方  <v-edit-div v-model='contract.supplementary.sellerPrice' v-if="pageType!='look'"
                                                                                                                                                              class="smallEdit"></v-edit-div>
                    <span style="color: red" v-else>{{contract.supplementary.sellerPrice}}</span>
                    <span style="color: red"> 元( {{number2chinese(contract.supplementary.sellerPrice)}} )</span>现金[请注意：如提前已交付定金，此处的首付款应包含定金
                    ]。
                </div>
                <div class="conIndent">首付款具体还款情况如下表：</div>
                <div class="text-right">货币单位：元</div>
                <table class="conTable table-detail" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="td-title" style="width: 25%;">还款日期</td>
                        <td class="td-title" style="width: 25%;">本息合计</td>
                        <td class="td-title" style="width: 25%;">本金</td>
                        <td class="td-title" style="width: 25%;">利息<i class="fa fa-fw fa-plus" style="position: absolute;right: 10px;top:12px;cursor: pointer;color:#2a8cec;" @click="addRow('repaymentList','repayMent')"></i></td>
                    </tr>

                    <tr v-for="(item,i) in contract.repaymentList">
                        <td class="td-value"><input type="text" v-if="pageType!='look'" v-model="item.repaymentDate"
                                                    style="text-align: center"/>
                            <span v-else>{{item.repaymentDate}}</span></td>
                        <td class="td-value"><input type="text" v-if="pageType!='look'" v-model="item.total"
                                                    style="text-align: center"/>
                            <span v-else>{{item.total}}</span></td>
                        <td class="td-value"><input type="text" v-if="pageType!='look'" v-model="item.principal"
                                                    style="text-align: center"/>
                            <span v-else>{{item.principal}}</span></td>
                        <td class="td-value"><input type="text" v-if="pageType!='look'" v-model="item.interest"
                                                    style="text-align: center"/>
                            <span v-else>{{item.interest}}</span><i class="fa fa-fw fa-minus" style="position: absolute;right: 10px;top:12px;cursor: pointer;color:red;" @click="delRow('repaymentList')"></i></td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold">合计</td>
                        <td class="td-value" >{{total('total',contract.repaymentList)}}</td>
                        <td class="td-value" >{{total('principal',contract.repaymentList)}}</td>
                        <td class="td-value" >{{total('interest',contract.repaymentList)}}</td>
                    </tr>
                    <tr>
                        <td colspan="4">备注：买方若按时还款则不收取任何利息，若逾期未还款则按照当月欠款余额的1.00%收取利息。</td>
                    </tr>
                </table>
                <div><b>其他约定事项：</b></div>
                <div class="conIndent">1、因履行本合同所发生的一切争议，双方应通过友好协商解决；如果协商不成可向卖方所在地法院起诉处理。除了在诉讼过程中进行的诉讼部分外，合同仍继续履行。</div>
                <div class="conIndent">2、设备到达指定地点七日内，买方未提供完整融资手续，卖方有权通过GPS停机。</div>
                <div class="conIndent">3、若买方未按期支付首付款或分期款时，应承担未付金额年息24%的逾期违约金。</div>
                <div class="conIndent">4、设备到达指定地点七日内，买方未提供完整融资手续，卖方有权通过GPS停机。</div>
                <div class="sign">
                    <div class="left">
                        <div class="item">
                            <div class="title">卖&nbsp;&nbsp;方：</div>
                            <span style="color: red">{{contract.main.seller}}</span>
                        </div>
                        <div class="item">
                            <div class="title">住&nbsp;&nbsp;址：</div>
                            <span style="color: red">{{contract.main.sellerAddress}}</span>
                        </div>
                        <div class="item">
                            <div class="title">电&nbsp;&nbsp;话：</div>
                            <span style="color: red">{{contract.main.sellerTel}}</span>
                        </div>

                    </div>
                    <div class="right">
                        <div class="item">
                            <div class="title">买&nbsp;&nbsp;方：</div>
                            <span style="color: red">{{contract.main.buyer}}</span>
                        </div>
                        <div class="item">
                            <div class="title">住所住址：</div>
                            <span style="color: red">{{contract.main.buyerAddress}}</span>
                        </div>
                        <div class="item">
                            <div class="title">电&nbsp;&nbsp;话：</div>
                            <span style="color: red">{{contract.main.buyerTel}}</span>
                        </div>
                        <div class="item">
                            <div class="title">买方配偶：</div>
                            <span style="color: red">{{contract.main.buyerSpouse}}</span>
                        </div>
                        <div class="item">
                            <div class="title">住所地址：</div>
                            <span style="color: red">{{contract.main.buyerSpouseAddress}}</span>
                        </div>
                        <div class="item">
                            <div class="title">电&nbsp;&nbsp;话：</div>
                            <span style="color: red">{{contract.main.buyerSpouseTel}}</span>
                        </div>
                        <div class="item">
                            <div class="title">日&nbsp;&nbsp;期：</div>
                            <div class="value"><span style="color: red">{{today}}</span></div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </template>
            <!--保密承诺函--融资-->
            <template v-if="showModule('融资租赁','confidentiality')">
                <div class="conTitle">保密承诺函</div>
                <div class="conIndent" style="color: red"> {{contract.main.buyer}}先生/女士：</div>
                <div class="conIndent">鉴于您在我公司购买挖掘机时，我公司根据您的情况给予了一定的优惠政策，该优惠政策属于为您而创制的保密信息</div>
                <div class="conIndent">为妥善保护保密信息，请您按法律法规以及本函的要求履行对保密信息的保密责任：</div>
                <div>第一条 定义</div>
                <div class="conIndent">保密信息，是指您在我公司购买挖掘机所获得的特殊优惠政策。</div>
                <div>第二条 保密义务</div>
                <div class="conIndent">1、 您应承诺本保密信息只限于您知晓并享有；</div>
                <div class="conIndent">2、 您应对保密信息妥善保密，保护的程度应不低于您对自己的保密信息所采取的保密措施和审慎程度。</div>
                <div class="conIndent">3、 未经我公司事先书面同意，您不得以泄露、告知、转让或者其他任何方式使任何第三方知悉保密信息</div>
                <div class="conIndent">4、 未经我公司事先书面同意，您不得向任何第三方透露本保密承诺函的存在或本保密承诺函的任何内容。</div>
                <div class="conIndent">5、 如基于法律、法规、判决、裁定或政府要求必须披露保密信息时，您应当事先尽快通知我公司。</div>
                <div>第三条 违约责任</div>
                <div class="conIndent">
                    如您违反本保密承诺函项下的任何承诺，应赔偿我公司100万元以上的违约金，并我公司有权依据保密信息泄露严重程度采取通过GPS对挖掘机进行锁机操作或收回挖掘机等措施。
                </div>
                <div>第四条 保密期限</div>
                <div class="conIndent">您在本保密承诺函项下的保密期限应自本承诺函上签署确认之日起五年内。</div>
                <div>第五条 管辖约定</div>
                <div class="conIndent"> 如履行本承诺函过程中发生争议，太原市小店区法院拥有管辖权。</div>
                <div class="conIndent"><b>如您同意本保密承诺函的各项内容并愿意承担保密责任，请在本承诺函后附确认区域签字，本承诺函自您签字盖章之日起即对您发生效力。</b></div>
                <div class="conIndent">顺颂商祺！</div>
                <div class="confidentiality">
                    <div>
                        <div class="right">
                            <div class="item">
                                <div class="title"><span style="color: red">{{contract.main.seller}}</span></div>
                            </div>
                            <div class="item">
                                <div class="title"><span style="color: red">{{today}}</span></div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="line"></div>
                    <div class="conIndent"><b>我已阅知上述内容并承诺承担本函所述各项保密责任。</b></div>
                    <div class="conIndent"><b>承诺人（签字并按手印）：</b></div>
                    <div class="conIndent"><b>承诺人身份证号：</b></div>
                    <div class="conIndent"><b>（附身份证复印件）</b></div>
                    <div>
                        <div class="right">
                            <div class="item">
                                <div class="title"><span style="color: red">{{today}}</span></div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </template>


        </div>
        <!--批注-->

    </div>
    <div class="clearfix"></div>
</section>

<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>

<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>
<script src="Template.js?t=42e28def"></script>

<script>
    $(function () {
        $("body").on("click", ".selectModel", function (e) {
            if ($(".model-picker-dropdown").is(":hidden")) {
                $(".model-picker-dropdown").css({
                    "width": $(this).outerWidth() + "px",
                    "left": $(this).offset().left,
                    "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            } else {
                $(".model-picker-dropdown").hide();
            }
        });
        $("body").on("click", ".model-select-tab a", function (e) {
            $(this).parent().find("a").removeClass("active");
            $(this).addClass("active");
            var boxName = $(this).attr("data-count");
            $(".model-select").hide();
            $(".model-select-content" + " ." + boxName).show();
        });
        $("body").on("click", ".model-select  a", function (e) {
            if ($(this).hasClass("active")) {
                return false;
            }
            $(this).parent().find("a").removeClass("active");
            var id = $(this).attr("attr-id");
            $(this).addClass("active");
            var val = $(this).text();
            if ($(this).parents(".model-select").hasClass("type")) {
                $(".model-select-tab a").removeClass("active");
                $(".model-select-tab a[data-count=brand]").addClass("active");
                $(".model-select").hide();
                app.main.provinceName = val;
                app.main.cityName = '';
                app.getCity(id);
                $(".model-select-content .brand").show();
            } else if ($(this).parents(".model-select").hasClass("brand")) {
                app.main.cityName = val;
                $(".model-picker-dropdown").hide();
            }
        })
        $("body").on("click", ".model-picker-dropdown", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".model-picker-dropdown").hide();
        });
    });
</script>
<script>
    Vue.component('v-edit-div', {
        props: {
            value: {
                type: String,
                default: ''
            }
        },
        data: function () {
            return {
                innerText: this.value,
                isLocked: false
            }
        },
        watch: {
            value: function () {
                console.log()
                if (!this.isLocked && !this.innerText) {
                    this.innerText = this.value;
                }
            }
        },
        methods: {
            changeText: function () {
                this.$emit('input', (this.$el.innerHTML).replace(/<[^>]+>/g, ""));
            }
        },
        template: '<div class="vEdit"  contenteditable="plaintext-only"   v-html="innerText"   @focus="isLocked = true" @blur="isLocked = false" @input="changeText"></div>'
    });
    var app = new Vue({
        el: '#app',
        data: {
            currentUser: getCurrentUser(),
            pageType: 'add',//页面类型
            businessId: $.wyui.page.urlParams.businessId,//商务条件Id
            brandName: "利勃海尔",
            buyType: "融资租赁",
            test: '<div class="conIndent">4、如果买方未按时支付商品款或融资租赁款，卖方可随时通过GPS将该设备停机并收回该设备，并要求买方结清全部商品欠款、赔偿其它损失。在收回商品60日内买方还未支付所欠全部商品欠款和各种税费时，卖方有权直接出售或向法院提起诉讼要求法院依法拍卖商品，所得价款优先用于偿付买方所欠全部商品款项（含卖方垫付款、到期和未到期租金、利息罚息等）、各种税费（含收回商品后产生的税费）、其它损失和由此支出的所有费用（包括但不限于诉讼费、公证费、律师费、差旅费、拖车费），不足部分，继续向买方追偿。</div><div class="conIndent">5、在本合同第四条第3、4项发生时，卖方有权直接向买方追偿欠款及其它费用或采取法律途径追偿欠款及其它费用。</div><div class="conIndent">6、商品在无信号地区连续工作61天会自动锁机（51天和58天时会自动发出锁车警告）。</div><div class="conIndent">7、该商品的保险生效日期为商品交付并买方提供有效身份证复印件之后的第二个工作日（法定节假日顺延），在此期间如果该商品发生损坏，全部风险由买方承担。</div><div class="conIndent">8、如商品保险期间出险，由买方自行向保险公司索赔，卖方仅有协助义务,并不承担任何相关责任。如买方拒绝在卖方处对出险商品进行维修或买方不能在出险一个月内提供完整的理赔所需资料，卖方有权拒绝协助理赔。</div><div class="conIndent">9、如买方采用承兑方式支付商品款或融资租赁款，则卖方有权按照银行实时利率对买方收取贴现利息。</div>',
            today: new Date().Format("yyyy-MM-dd"),//今天
            companyList: [],
            companyInfo: {},
            provinceList: [],
            cityList: [],
            text: "",
            contractTypeList: ['sales', 'confidentiality'],
            contract: {main: {}, sales: {}},
            main: {
                companyId: '2017121617464DFEB683A82815924552',
                provinceName: "",
                cityName: "",
                repayMent: [
                    new Template.repayMent()
                ]
            }
        },
        methods: {
            number2chinese: function (str) {
                var num = parseInt(str);
                var strOutput = "",
                    strUnit = '仟佰拾亿仟佰拾万仟佰拾元角分';
                num += "00";
                var intPos = num.indexOf('.');
                if (intPos >= 0) {
                    num = num.substring(0, intPos) + num.substr(intPos + 1, 2);
                }
                strUnit = strUnit.substr(strUnit.length - num.length);
                for (var i = 0; i < num.length; i++) {
                    strOutput += '零壹贰叁肆伍陆柒捌玖'.substr(num.substr(i, 1), 1) + strUnit.substr(i, 1);
                }
                return strOutput.replace(/零角零分$/, '整').replace(/零[仟佰拾]/g, '零').replace(/零{2,}/g, '零').replace(/零([亿|万])/g, '$1').replace(/零+元/, '元').replace(/亿零{0,3}万/, '亿').replace(/^元/, "零元")
            },
            checkedOne: function (moduleKey) {
                var idIndex = this.contractTypeList.indexOf(moduleKey)
                if (idIndex >= 0) {
                    // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
                    this.contractTypeList.splice(idIndex, 1)
                } else {
                    // 选中该checkbox
                    this.contractTypeList.push(moduleKey)
                }
                console.log(this.contractTypeList);
            },
            showDz: function () {
                var html = '';
                if (this.main.cityName != '') {
                    html += this.main.cityName;
                } else {
                    if (this.main.provinceName) {
                        html += this.main.provinceName;
                    }
                }
                return html;
            },
            changeCompany: function () {
                var that = this;
                $.wyui.postMethod("/company/getCompanyById.json", {
                    id: that.main.companyId
                }, function (data) {
                    that.companyInfo = data;
                    console.log(data)
                });
            },
            getCity: function (id) {
                var that = this;
                $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': id}, function (r) {
                    console.log(r);
                    that.cityList = r.records;
                })
            },
            showModule: function (moduleKey, buyType) {
                var that = this
                if (moduleKey.indexOf(that.buyType) >= 0 && that.contractTypeList.indexOf(buyType) >= 0) {
                    return true;
                } else {
                    return false;
                }
            },
            total: function (theWay, item) {
                var total = 0;
                var principal = 0;
                var interest = 0;
                if (theWay == 'total') {
                    for (var i = 0; i < item.length; i++) {
                        total = total + item[i].total;
                    }
                    return total;
                } else if (theWay == 'principal') {
                    for (var i = 0; i < item.length; i++) {
                        principal = principal + item[i].principal;
                    }
                    return principal;
                } else if (theWay == 'interest') {
                    for (var i = 0; i < item.length; i++) {
                        interest = interest + item[i].interest;
                    }
                    return interest;
                }

            },
            addRow: function (prop, template) {
                console.log(prop);
                this.contract[prop].push(new Template[template]());
            },
            delRow: function (prop) {
                this.contract[prop].splice(this.contract[prop].length - 1, 1);
            }
        },
        mounted: function () {
            var that = this;
            //获取公司列表
            $.wyui.postMethod("/company/getCompanyList.json", {}, function (data) {
                that.companyList = data;
                that.changeCompany();
            });
            /*获取省份*/
            $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': '0'}, function (r) {
                that.provinceList = r.records;
            })
            if (that.pageType == "add") {
                $.wyui.postMethod(urlConfig.contract.newContract, {
                    businessId: "2018062011424D2086931618910C0A6D"
                }, function (data) {
                    that.contract = data
                    that.main.repayMent=data.repaymentList
                });
            } else if (that.pageType == 'edit') {

            } else {

            }

        }
    });

</script>
<script>
    $('[contenteditable]').each(function () {
        // 干掉IE http之类地址自动加链接
        try {
            document.execCommand("AutoUrlDetect", false, false);
        } catch (e) {
        }

        $(this).on('paste', function (e) {
            e.preventDefault();
            var text = null;

            if (window.clipboardData && clipboardData.setData) {
                // IE
                text = window.clipboardData.getData('text');
            } else {
                text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
            }
            if (document.body.createTextRange) {
                if (document.selection) {
                    textRange = document.selection.createRange();
                } else if (window.getSelection) {
                    sel = window.getSelection();
                    var range = sel.getRangeAt(0);

                    // 创建临时元素，使得TextRange可以移动到正确的位置
                    var tempEl = document.createElement("span");
                    tempEl.innerHTML = "&#FEFF;";
                    range.deleteContents();
                    range.insertNode(tempEl);
                    textRange = document.body.createTextRange();
                    textRange.moveToElementText(tempEl);
                    tempEl.parentNode.removeChild(tempEl);
                }
                textRange.text = text;
                textRange.collapse(false);
                textRange.select();
            } else {
                // Chrome之类浏览器
                document.execCommand("insertText", false, text);
            }
        });
        // 去除Crtl+b/Ctrl+i/Ctrl+u等快捷键
        $(this).on('keydown', function (e) {
            // e.metaKey for mac
            if (e.ctrlKey || e.metaKey) {
                switch (e.keyCode) {
                    case 66: //ctrl+B or ctrl+b
                    case 98:
                    case 73: //ctrl+I or ctrl+i
                    case 105:
                    case 85: //ctrl+U or ctrl+u
                    case 117: {
                        e.preventDefault();
                        break;
                    }
                }
            }
        });
    });
</script>
</body>
</html>
